<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.detail {
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow: hidden;
		flex:1;
		box-sizing: border-box;
		.headerImg{
			width: 100%;
			box-sizing: border-box;
		}
		.info{
			display: flex;
			flex-direction: column;
			padding: 0 1.6rem 1rem 1.6rem;
			.line1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1rem 0;
				.title{
					font-size: 1.7rem;
					color: $color1;
				}
				.badge {
					padding: 0.4rem 1rem;
					font-size: 1.2rem;
					background-color: rgba(#FF7E16, 0.2);
					color: #FF7E16;
					// border: 0.1rem solid #FF6D00;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
				.badge3 {
					padding: 0.3rem 0.8rem;
					font-size: 1.2rem;
					transform: scale(0.8);
					background-color: #E4EAFF;
					color: #4970FD;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
				.badge1 {
					padding: 0.3rem 0.8rem;
					font-size: 1.2rem;
					transform: scale(0.8);
					background-color: #FFECDC;
					color: #FF7E16;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
				.badge2 {
					padding: 0.3rem 0.8rem;
					font-size: 1.2rem;
					background-color: #E8E9E9;
					color: #999;
					border-radius: 0.3rem;
					box-sizing: border-box;
					overflow: hidden;
				}
			}
			.line2{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: $color2;
				.text{
					font-size: 1.3rem;
					margin-left: 0.6rem;
				}
				.text2{
					font-size: 1.3rem;
					margin-left: 0.6rem;
					color: $adornColor;
				}
			}
		}
		.listApply{
			padding: 0 1.3rem;
			background-color: white;
			.item{
				display: flex;
				padding: 0.7rem 0;
				align-items: center;
				border-bottom: 1px solid #f4f4f4;
				.leftList{
					flex: 1;
					display: flex;
					align-items: center;
					.icon{
						
					}
					.name_time{
						display: flex;
						flex-direction: column;
						margin-left: 0.5rem;
						.name{
							color: $color2;
						}
						.time{
							color:$color3;
							margin-top: 0.7rem;
						}
					}
				}
				.rightList{
					flex: 0 0 5rem;
					text-align: center;
					.badge{
						padding: 0.4rem;
						font-size: 1.2rem;
						background-color: #CDD8FF;
						color: $mainColor;
						border-radius: 0.3rem;
						box-sizing: border-box;
						overflow: hidden;
					}
				}
			}
		}
	}
	.flag{
		padding: 1.4rem 1.3rem 1rem 1.3rem;
		font-size: 1.7rem;
	}
	.content{
		padding: 1.4rem 1.6rem;
		
		.title2{
			font-size: 1.6rem;
			color: $color2;
			font-weight: bold;
		}
		.line{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			.label{
				color: #999;
			}
			.value{
				color: #777;
				margin-left: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line3{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			border-bottom: 1px solid #f4f4f4;
			padding-bottom: 1rem;
			.label{
				color: #999;
			}
			.title{
				font-size: 1.6rem;
				font-weight: bold;
				color: $color2;
			}
			.value{
				color: #777;
				margin-top: 1.2rem;
				line-height: 1.6rem;
			}
		}
		.line4{
			margin-top: 1.2rem;
			font-size: 1.3rem;
			padding-bottom: 1rem;
			.item{
				padding: 2.8rem 1.2rem 1.2rem 1.2rem;
				background-color: white;
				box-shadow:0 0 1px 1px #f4f4f4;
				border-radius: 0.8rem;
				margin-top: 3rem;
				position: relative;
				.image{
					position: absolute;
					left: 1.2rem;
					top: -1.7rem;
				}
				.name{
					font-size: 1.5rem;
					color: $color1;
				}
				.desc{
					margin-top: 0.8rem;
					color: $color3;
					font-size: 1.1rem;
					line-height: 1.6rem;
				}
			}
		}
	}
	.fix-bottom{
	  position: fixed;
	  bottom: 0rem;
	  left: 0;
	  right: 0;
	  z-index: 1;
	  box-sizing: border-box;
	  background: white;
	  text-align: center;
	  border-top: 1px solid #f4f4f4;
	  padding: 0.5rem 1.6rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .box{
		  flex: 0 0 3.6rem;
		  .icon{
			  
		  }
		  .text{
			  font-size: 1.3rem;
			  color: $color3;
		  }
	  }
	  .submitBtn{
		  flex: 0 0 70%;
		  background-color:$mainColor;
		  color:white;
		  margin: 0.2rem auto;
		  font-size: 1.4rem;
		  
	  }
	}
	.jie{
		padding: 1rem 1.6rem;
		display: flex;
		
		.jieLeft{
			flex: 0 0 2rem;
		}
		.jieRight{
			flex: 1;
			.title{
				font-size: 1.5rem;
				color: $color1;
			}
			.time{
				margin-top: 0.6rem;
				font-size: 1.2rem;
				color:$color2;
			}
		}
	}
</style>
<template>
	<div class="detail" v-if="course.course">
		<img class="headerImg" :src="course.course.images" alt="">
		<div class="info">
			<div class="line1">
				<span class="title">{{course.course.name}}</span>
				<span :class="$utils.getStatusBadge(course.model.start)">{{(course.model.startname)}}</span>
			</div>
			<div class="line2">
				<span><van-icon name="clock-o" size="1.8rem"/></span>
				<span class="text">{{$utils.parseTimeAllYMDHM(course.course.closing_time)}} 报名截止</span>
			</div>
			<!-- <div class="line2 margT-l">
				<span><van-icon name="location-o" size="1.9rem"/></span>
				<span class="text">{{course.class[0]||course.course.university}}</span>
			</div> -->
			<div class="line2 margT-l" v-if="course.model.sign">
				<span><van-icon name="friends-o" size="1.9rem"/></span>
				<span class="text">{{course.model.sign || 0}}人已报名</span>
				<span class="text" v-if="course.model.limt_number">|</span>
				<span class="text2" v-if="course.model.limt_number">限报{{course.model.limt_number}}人</span>
			</div>
		</div>
		<div class="splitLine"></div>
		<div>
			<van-tabs v-model="tabActive" line-width="100" title-active-color="#335FFC" color="#335FFC" @change="onClickTabs">
			  <van-tab title="课程简介" name="0">
				  <div class="content">
					  <div class="title2">
							课程信息
					  </div>
					  <div class="line">
						  <span class="label">时间</span>
						  <span class="value">{{$utils.parseTimeAllYMDHM(course.course.release_time)}} 至 {{$utils.parseTimeAllYMDHM(course.course.closing_time)}}</span>
					  </div>
					  <div class="line">
						  <span class="label">课时</span>
						  <span class="value">{{course.course.course_duration}}节课时</span>
					  </div>
					  <div class="line3" v-if="course.course.remarks">
						  <div class="label">备注</div>
						  <div class="value">
							  {{course.course.remarks}}
						  </div>
					  </div>
					  <div class="line3" v-if="course.course.introduction">
						  <div class="title">课程介绍</div>
						  <div class="value">
							  {{course.course.introduction}}
						  </div>
					  </div>
					  <div class="line4">
						  <div class="title">课程讲师</div>
						  <div class="item" v-for="(item,index) in course.teacher" :key="index">
							  <van-image
								class="image"
								round
								width="3.4rem"
								height="3.4rem"
								fit="cover"
								:src="item.avatar"
							  />
							  <div class="name">{{item.name}}</div>
							  <div class="desc">{{item.introduction}}</div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			  <van-tab title="课程目录" name="1">
				  <!-- <div class="jie">
					  <div class="jieLeft">01</div>
					  <div class="jieRight">
						  <div class="title">莫高窟——古丝绸路上的咽喉之地</div>
						  <div class="time">上课时间：5月1日(周二) 9:00-9:40</div>
					  </div>
				  </div> -->
				  <van-collapse v-if="course.course.type==1" v-model="activeNames">
				    <van-collapse-item v-for="(item,index) in coursesMulu" :key="index" :title="`第${index+1}章 ${item.title}`" :name="index">
					<div class="jie" :class="active==item.id?'active':''" v-for="(item,index) in item.children" :key="index">{{index+1}} {{item.titles}}</div>
				  </van-collapse-item>
				  </van-collapse>
				  <div v-if="course.course.type==2">
					  <!-- <div class="jie" v-for="(item,index) in coursesMulu" :key="index">{{index+1}} {{item.title}}</div> -->
					  <div class="jie" v-for="(item,index) in coursesMulu" :key="index">
						  <div class="jieLeft">{{(index+1)<10?'0'+(index+1):(index+1)}}</div>
						  <div class="jieRight">
							  <div class="title">{{item.title}}</div>
							  <div class="time">上课时间：{{item.startclasstime}}</div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			  <van-tab title="报名情况" v-if="fromView=='apply'" name="2">
				<div class="flag">报名人数（{{totle}}）</div>
				  <div class="listApply">
					  <div class="item" v-for="(item,index) in recordList" :key='index'>
						  <div class="leftList">
							  <div class="icon">
								  <van-image
								    round
								    width="2.1rem"
								    height="2.1rem"
								    :src="item.avatar"
								  />
							  </div>
							  <div class="name_time">
								  <div class="name">{{item.name}}</div>
								  <div class="time">{{item.createtime}}</div>
							  </div>
						  </div>
						  <div class="rightList" v-if="item.status==2">
							  <div class="badge">
								  已审核
							  </div>
						  </div>
					  </div>
				  </div>
			  </van-tab>
			</van-tabs>
		</div>
		<div class="tabbar-height-white"></div>
		<div class="tabbar-height-white"></div>
		<div class="fix-bottom">
			<van-button round class="submitBtn" size="normal" @click="toView(`/course/moreCheck?id=${course.course.id}&campus_id=${$route.query.campus_id}&model_id=${course.model.id}`)" block>批量审核</van-button>
			<!-- <div style="width: 100%;display: flex;" v-else>
				<van-button round block class="submitBtn" v-if="course.course.status==1"  @click='xiajia(course.course)'>下架</van-button>
				<van-button round block class="submitBtn" v-else @click='shangjia(course.course)'>重新上架</van-button>
			</div> -->
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {Dialog,Toast} from 'vant';
	import SearchBox from '@/components/SearchBox.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox
		},
		data() {
			return {
				tabActive:2,
				active:0,
				course:'',
				fromView:'',
				coursesMulu:'',
				activeNames: [],
				id:'',
				type:'',
				userInfo:'',
				recordList:[],
				totle:''
			}
		},
		created() {
			const _this = this;
			this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
			// this.getCode()
		},
		mounted() {
			this.id = this.$route.query.id
			this.type = this.$route.query.type
			this.fromView = this.$route.query.fromView
			console.log("this.fromView",this.fromView)
			this.CoursesDetail(this.id,this.type)
		},
		methods: {
			shangjia(item) {
				const _this = this
				const masterColor = _this.$store.state.masterColor
				console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
				Dialog.confirm({
				  title: '重新上架',
				  message: '是否确定重新上架本课程？',
				  confirmButtonColor: masterColor
				}).then(() => {
					// on confirm
					this.shangxiajia(item)
				  }).catch(() => {
					// on cancel
				  });
			},
			xiajia(item) {
				const _this = this
				const masterColor = _this.$store.state.masterColor
				console.log("_this.$store.state.masterColor",_this.$store.state.masterColor)
				Dialog.confirm({
				  title: '下架确认',
				  message: '是否确定下架本课程？',
				  confirmButtonColor: masterColor
				}).then(() => {
					// on confirm
					this.shangxiajia(item)
				  }).catch(() => {
					// on cancel
				  });
			},
			shangxiajia(item) {
				let params = {
					id: item.id,
					status: item.status,
					campus: this.userInfo.campus_id
				}
				this.$request.CoursesSaves(params).then(res=>{
					// Dialog({ message: '提示' });
					if(res.ret==200){
						// this.courseData = res.data.data
						Toast.success('操作成功');
						this.CoursesDetail(this.id,this.type)
					}
					// else{
					// 	Dialog({ title:'系统提示', message: res.msg });
					// }
				})
			},
			CoursesItem() {
				const _this = this;
				let params = {
					id: this.course.course.id
				}
				console.log("CoursesItem",params)
				_this.$request.CoursesItem(params).then(res => {
					let coursesMulu = res.data
					coursesMulu.map((item,index)=>{
						const y_m = _this.$utils.parseToDateMD(item.start_time)
						const hm_hm = `${_this.$utils.parseToDateHM(item.start_time)}-${_this.$utils.parseToDateHM(item.end_time)}`
						item.startclasstime = `${y_m} ${hm_hm}`
						return item
					})
					_this.coursesMulu = coursesMulu
				})
			},
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					
				} else if (index == 1) {
					//课程目录
					this.CoursesItem()
				}else if (index == 2) {
					//报名记录
					this.RecordsPages()
				}
			},
			CoursesDetail(id,type) {
				const _this = this;
				let params = {
					id:id,
					type:type,
					campus: this.$route.query.campus_id,
				}
				_this.$request.CoursesDetail(params).then(res => {
					if(res.ret==200){
						console.log('-----',res.data)
						this.course = res.data
					}
					// this.$store.commit('setCaseList', this.caseList);
				})
			},
			RecordsPages() {
				const _this = this;
				let params = {
					curriculum_id: this.id,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				}
				_this.$request.RecordsPages(params).then(res => {
					let data = res.data.data
					 _this.recordList = data
					 _this.totle = res.data.totalCount
					// _this.recordList.push(...data)
					// console.log(_this.recordList.length)
					// if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
					// 	_this.finished = true;
					// } else {
					// 	_this.pageNo++
					// }
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
				})
			},
		}
	};
</script>
